<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内容管理</title>
  {include file="common/_require"}
  <link rel="stylesheet" href="/static/lib/quill/quill.snow.css">
  <script src="/static/lib/quill/quill.min.js"></script>
  <script>
    var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
    var currentLeftNavItem = 'post-{$Request.param.type|default="1"}';
  </script>

  <style>

    #toolbar select{
      display: none !important;
    }

  </style>
</head>

<body class="layui-layout-body">

  <div class="layui-layout layui-layout-admin">
    {include file="common/_header"}

    {include file="common/left_post"}

    <div class="layui-body">

      <div style="padding:15px">
        <div class="main-header">
          <span class="layui-breadcrumb">
            <a>首页</a>
            <a><cite>内容管理</cite></a>
          </span>
        </div>
        <div class="main-container">
          <div class="layui-row">
            <form action="{:url('save')}" method="POST" class="layui-form" lay-filter="*">
              <input type="hidden" name="type" value="{$Request.param.type}">
              <div class="layui-col-md9 layui-col-lg10">
                <fieldset class="layui-elem-field">
                  <legend>添加</legend>
                  <div class="layui-field-box">


                    <div class="layui-form-item">
                      <div class="layui-form-label">标题</div>
                      <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" class="layui-input">
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <div class="layui-form-label">封面</div>
                      <div class="layui-input-block">
                        <input type="hidden" name="poster">
                        <div>
                          <div class="layui-btn upload-poster">上传</div>
                        </div>
                        <div>
                          <img src="" class="poster" style="display: none;max-width: 200px;max-height: 200px;;" alt="">
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-form-label">描述</div>
                      <div class="layui-input-block">
                        <textarea name="desc" class="layui-textarea"></textarea>
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <div class="layui-form-label">内容</div>
                      <div class="layui-input-block">
                        <div id="toolbar">
                          <!-- Add font size dropdown -->
                          <select class="ql-size" lay-ignore="lay-ignore">
                            <option value="small">小号</option>
                            <!-- Note a missing, thus falsy value, is used to reset to default -->
                            <option selected>正常</option>
                            <option value="large">大号</option>
                            <option value="huge">特大号</option>
                          </select>
                          <!-- Add a bold button -->
                          <button class="ql-bold"></button>
                          <button class="ql-italic"></button>
                          <button class="ql-link"></button>
                          <button class="ql-underline"></button>
                          <button class="ql-strike"></button>
                          <button class="ql-blockquote"></button>
                          <button class="ql-code-block"></button>
                          <button class="ql-header" value="1" title="大标题"></button>
                          <button class="ql-header" value="2" title="小标题"></button>
                          <button class="ql-list" value="ordered" title="有序列表"></button>
                          <button class="ql-list" value="bullet" title="无序列表"></button>

                          <!-- Add subscript and superscript buttons -->
                          <button class="ql-script" value="sub"></button>
                          <button class="ql-script" value="super"></button>
                          <button class="ql-indent" value="-1"></button>
                          <button class="ql-indent" value="+1"></button>
                          <button class="ql-direction" value="rtl"></button>
                          <select class="ql-color" lay-ignore="lay-ignore"></select>
                          <select class="ql-background" lay-ignore="lay-ignore"></select>
                          <select class="ql-font" lay-ignore="lay-ignore"></select>
                          <button class="ql-align" value="center"></button>
                          <button class="ql-align" value=""></button>
                          <button class="ql-align" value="right"></button>
                          <button class="ql-align" value="justify"></button>
                          <button class="ql-image" title="选择图片"></button>


                        </div>
                        <div id="editor" style="height: 600px;">

                        </div>
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="save">保存</button>
                    </div>

                  </div>
                </fieldset>
              </div>
              <div class="layui-col-md3 layui-col-lg2">
                <fieldset class="layui-elem-field sm-form">
                  <legend>信息</legend>
                  <div class="layui-field-box">
                    <div class="layui-form-item">
                      <div class="layui-form-label">状态</div>
                      <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="发布">
                        <input type="radio" name="status" value="0" title="不发布" checked>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-form-label">发表时间</div>
                      <div class="layui-input-block">
                        <input type="text" name="publish_time" class="layui-input publish-time">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-form-label">分类</div>
                      <div class="layui-input-block ">
                        <div class="category-list"></div>


                        <div class="quick-input-item sm-quick-input-item">
                          <div class="new-category-option-list">
                            <select name="" lay-verify="">
                              <option value="0">选择父分类</option>

                            </select>
                          </div>
                          <div class="">

                            <input type="text" name="" placeholder="输入新分类名称" id="new-category" class="layui-input">
                            <div class="layui-btn create-category">新增</div>
                          </div>
                        </div>

                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-form-label">标签</div>
                      <div class="layui-input-block ">
                        <div class="tag-list">

                        </div>
                        <div class="quick-input-item sm-quick-input-item" title="输入新标签,使用空格分隔可一次添加多个标签">
                          <div class="">
                            <input type="text" name="" placeholder="输入新标签" autocomplete="off" id="new-tags" class="layui-input">
                            <div class="layui-btn create-tags">新增</div>
                          </div>
                        </div>

                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-form-label">是否置顶</div>
                      <div class="layui-input-block">
                        <input type="radio" name="is_top" value="1" title="置顶">
                        <input type="radio" name="is_top" value="0" title="不置顶" checked>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-form-label">跳转链接</div>
                      <div class="layui-input-block">
                        <input type="text" name="jump_to_url" class="layui-input">
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <div class="layui-form-label">跳转链接状态</div>
                      <div class="layui-input-block">
                        <input type="radio" name="jump_to_url_status" value="0" title="不显示">
                        <input type="radio" name="jump_to_url_status" value="1" title="仅显示" checked>
                        <input type="radio" name="jump_to_url_status" value="2" title="自动跳转">
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <div class="layui-form-label">排序</div>
                      <div class="layui-input-block">
                        <input type="number" name="sort" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">越大越靠前</div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-form-label">模板</div>
                      <div class="layui-input-block">
                        <select name="tpl_name">
                          {volist name=':config("view_type.post")' id='tpl_name'}
                          <option value="{$key}">{$tpl_name}</option>
                          {/volist}
                        </select>
                      </div>
                    </div>
                  </div>
                </fieldset>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>


    {include file="common/_footer"}

    <div class="tpl" style="display: none;">
      <input type="checkbox" name="tags[]" class="tag-item" value="0" title="高层" lay-skin="primary">
      <div class="category-item">
        <input type="checkbox" name="categorys[]" value="0" title="PHP" lay-skin="primary">
      </div>
      <option value="0" class="new-category-item">选择父分类</option>


    </div>
  </div>

  <script>

    layui.use(['form', 'upload','laydate'], function () {
      var upload = layui.upload;
      var form = layui.form;
      var laydate = layui.laydate;

      laydate.render({
        elem:'.publish-time',
        type:'datetime'
      })

      var currentRange = {
        index: 0,
        length: 0
      }
      var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
          toolbar: '#toolbar',

        },

      });

      quill.on('selection-change', function (range, oldRange, source) {
        if (range) {
          if (range.length == 0) {
            console.log('User cursor is on', range.index);
          } else {
            var text = quill.getText(range.index, range.length);
            console.log('User has highlighted', text);
          }
          currentRange = range;
          console.log(currentRange);

        } else {
          console.log('Cursor not in the editor');
        }
      });

      quill.on('text-change', function (delta, oldDelta, source) {

        if (source == 'api') {
          console.log("An API call triggered this change.");
        } else if (source == 'user') {
          console.log("A user action triggered this change.");
        }
      });

      upload.render({
        elem: '.ql-image',
        url: '{:url("File/save")}',
        data: {
          type: 4,
          dir: 'article'
        },
        accept: 'images',
        done: function (result) {
          if (result.code == 0) {
            layer.msg('上传成功');
            quill.insertEmbed(++currentRange.index, 'image', result.data.src);
          } else {
            layer.msg(result.msg)
          }
        }
      })
      upload.render({
        elem: '.upload-poster',
        url: '{:url("File/save")}',
        data: {
          type: 4,
          dir: 'article'
        },
        accept: 'images',
        done: function (result) {
          if (result.code == 0) {
            layer.msg('上传成功');
            $('input[name="poster"]').val(result.data.save_name)
            $('.poster').attr('src', result.data.src).show();
          } else {
            layer.msg(result.msg)
          }
        }
      })
      var toolbar = quill.getModule('toolbar');
      toolbar.addHandler('image', function () {
        return false;
      });

      form.on('submit(save)', function (data) {

        var formData = data.field;

        formData.content = quill.getContents().ops
        formData.content_html = $('#editor .ql-editor').html()

        console.log(formData);

        $.post('{:url("save")}',formData,function(result){
          console.log(result);
          layer.msg('添加成功')
          setTimeout(() => {
            location.href = result.data.jump_to_url
          }, 1200);
        })

        return false;

      })
      var tagPage = 1;
      initTags()
      function initTags() {
        $('.tag-list').children().remove()
        $('#new-tags').val('')
        tagPage = 1;
        loadTags()
      }
      function loadTags() {
        $.get('{:url("Tag/index")}', {
          page: tagPage,
          type:'{$Request.param.type}'
        }, function (result) {
          tagPage++;
          result.data.data.forEach(tag => {
            var domTag = $('.tpl .tag-item').clone();
            domTag.attr('title', tag.title)
            domTag.val(tag.id)
            domTag.appendTo('.tag-list')
          });
          form.render('checkbox')
          if (result.data.current_page < result.data.last_page) {
            loadTags()
          }
        })
      }

      $('.create-tags').click(function () {
        var value = $.trim($('#new-tags').val());

        if(value.length == 0){
          return false;
        }

        $.post('{:url("Tag/save")}', {
          tags: value
        }, function (result) {
          layer.msg('添加成功')
          initTags()
        })
      })

      var categoryPage = 1;
      initCategory();
      function initCategory(){
        $('.category-list').children().remove();
        $('.new-category-option-list').find('.new-category-item').remove();
        $('.new-category-option-list').find('.layui-form-select').remove();
        $('#new-category').val('')
        categoryPage = 1;
        loadCategory()
      }

      function loadCategory() {
        $.get('{:url("Category/index")}',{
          type:'{$Request.param.type}'
        },function(result){
          console.log(result);
          result.data.forEach(category => {
            var prefix = '';
            for (let prefixLevelIndex = 0; prefixLevelIndex < category.level; prefixLevelIndex++) {
              prefix += '|--'
              
            }
            var domCategory = $('.tpl .category-item').clone();

            domCategory.find('input').val(category.id)
            domCategory.find('input').attr('title', prefix+category.title)

            domCategory.appendTo('.category-list')

            var domNewCategory = $('.tpl .new-category-item').clone();
            
            domNewCategory.text(prefix+category.title)
            domNewCategory.val(category.id)
            domNewCategory.attr('title',category.title)

            domNewCategory.appendTo('.new-category-option-list select')

          });
          form.render()
        })
      }
      $('.create-category').click(function(){
        var pid = $('.new-category-option-list').find('select').val();
        var title = $('#new-category').val()

        $.post('{:url("Category/save")}',{
          title:title,
          pid:pid
        },function(result){
          if(result.code == 0){
            layer.msg('添加成功')
            initCategory();
          }else{
            layer.msg(result.msg)
          }
        })
        
      })

    })

  </script>
</body>

</html>